<!-- 用户编辑弹窗 -->
<template>
  <el-drawer
    :visible.sync="visible"
    modal-append-to-body
    append-to-body
    size="80vw"
    :title="isUpdate ? '修改区域' : '添加区域'"
    :close-on-click-modal="false"
  >
    <el-row type="flex" slot="title" justify="space-between">
      <el-col :span="6">{{ isUpdate ? "修改区域" : "添加区域" }}</el-col>
      <el-col :span="3">
        <el-button type="primary" size="medium" @click="onPatharrs"
          >保存</el-button
        ></el-col
      >
    </el-row>
    <el-row style="padding: 20px 50px">
      <el-col :span="3" style="line-height: 40px">学校名称:{{schooleName}}</el-col>
      
      <el-col :span="3" style="line-height: 40px; margin-left: 50px;text-align: right"
        >区域名称:</el-col
      >
      <el-col :span="6">
        <el-input
          clearable
          :maxlength="20"
          v-model="title"
          placeholder="请输入区域名称"
      /></el-col>
      <el-col :span="3" style="line-height: 40px; margin-left: 50px;text-align: right"
      >区域类型:</el-col
    >
      <el-col :span="6">
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in [
              {
                value: 'safe',
                label: '学校区域',
              },
              {
                value: 'pitfall',
                label: '危险区域',
              },
            ]"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option> </el-select
      ></el-col>
    </el-row>
    <div style="padding: 50px; padding-top: 0">
      <maps
        :schooleName="schooleName"
        :dzName1="dzName"
        ref="mapss"
        
        :datas="region_range"
        :visible1="visible"
      ></maps>
    </div>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消 </el-button>
      <el-button type="primary" :loading="loading" @click="save"
        >保存
      </el-button>
    </div>
  </el-drawer>
</template>
  
  <script>
import maps from "./map.vue";
export default {
  name: "UserEdit",
  components: { maps },
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object,
    schooleName: String,
    dzName: Array,
  },
  // components: { Treeselect},
  data() {
    return {
      // 提交状态
      loading: false,
      isUpdate: false,
      title: "",
      value: "safe",
      datas: {},
      region_range: "",
    };
  },
  watch: {
    data(vel) {
      if (vel) {
        let obj = JSON.parse(JSON.stringify(vel));
        if (obj.id) {
          this.isUpdate = true;
          console.log(obj);
          this.datas = {
            id: obj.id,
            schoole_id: obj.schoole_id,
          };
          this.title = obj.title;
          this.value = obj.mode;
          this.region_range = obj.region_range;
          this.$nextTick(() => {
            this.$refs.mapss.initData(obj.region_range);
          });
        }else{
          this.datas=obj
          this.title = this.schooleName;
          this.value = 'safe';
          this.region_range = '';
          this.$nextTick(() => {
          this.$refs.mapss.initData();
          })
        }
        // 清空密码输入框
      } else {
        this.title = "";
        this.value = "safe";
        this.datas = vel;
      }
    },
  },
  mounted() {},
  methods: {
    save() {},
    /* 更新visible */
    updateVisible(value) {
      this.$emit("update:visible", value);
    },
    onPatharrs(res) {
      console.log(res, 12313454);
      console.log(this.$refs.mapss.campusOk());
      let dizi = this.$refs.mapss.campusOk();
      if (!dizi) {
        return this.$message({
          message: "请划至少划分一个区域位置！",
          type: "warning",
        });
      }
      if (!this.title) {
        return this.$message({
          message: "请输入区域名称！",
          type: "warning",
        });
      }
      this.$http
        .post("/schoole_region/edit", {
          ...this.datas,
          title: this.title,
          region_range: JSON.stringify(dizi),
          mode: this.value,
        })
        .then(() => {
          this.updateVisible(false);
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    },
  },
};
</script>
  
  <style scoped>
</style>
  